<template>
  <div>
    <c-title :hide="false" text="商品详情"></c-title>
    <div class="goods-img">
      <!-- <viewer :images="getGoods.thumb_url" class="section" style="position: relative"> -->
        <c-myswipe :style="{ height: fun.getPhoneEnv() == 3 ? '375px' : '100vw' }" :pagination-visible="false" :slides="getGoods.thumb_url" :repeating="false" :auto="0" class="banner_pcStyle">
          <div v-if="!fun.isTextEmpty(getGoods.goods_video)"  style="background:#000">
            <video
              id="goods_vedio"
              style="width: 100%; height: 21.5625rem;object-fit: scale-down"
              :poster="getGoods.video_image"
              :src="getGoods.goods_video"
              controls
              webkit-playsinline="true"
              playsinline="true"
              x5-playsinline="true"
              x-webkit-airplay="true"
              x5-video-ignore-metadata="true"
              width="100%"
              height="100%"
            >
              <source :src="getGoods.goods_video" />
            </video>
          </div>
          <div v-if="!getGoods.thumb_url || getGoods.thumb_url == null || getGoods.thumb_url.length == 0">
            <img :src="getGoods.thumb" width="100%" />
          </div>

          <div v-for="(ithumb, index) in getGoods.thumb_url" class="swiper-img" :key="index">
            <template v-if="ithumb">
              <img :src="ithumb" width="100%" />
              <div class="number-box">{{ index + 1 }} / {{ getGoods && getGoods.thumb_url.length }}</div>
            </template>
          </div>

        </c-myswipe>
      <!-- </viewer> -->
      <div class="goods-img-tag" v-if="goodsPlugin.coupon_store_goods && goodsPlugin.coupon_store_goods.visit_count_status">
        {{ pluginSetting.visit_count_name }}：{{ goodsPlugin.coupon_store_goods && goodsPlugin.coupon_store_goods.visit_count }}
      </div>
      <div class="start-time flex-a-c" v-if="beginStatus === 0">
        <div>距离开始</div>
        <!-- tool.getTimeDifference(couponStoreGoods.start_time*1000) -->
        <van-count-down :time="setTimeStart" class="bottom_time" format="DD天HH时mm分ss秒"></van-count-down>
      </div>
      <div class="start-time flex-a-c" v-else>
        <div>距离结束</div>
        <van-count-down :time="setTimeEnd" class="bottom_time" format="DD天HH时mm分ss秒"></van-count-down>
      </div>
    </div>
    <div class="discount-price flex-a-c flex-j-sb" :class="couponStoreGoods.offline_price === '0.00'?'discount-bg':''">
      <div class="discount-left flex" ref="discountLeft">
        <div class="discount-use flex">
          <span>￥</span>
          <p class="number">{{ toFixInt(getGoods.price) || '0'}}</p>
        </div>
        <div class="consumer flex">
          <span>消费券</span>
        </div>
      </div>
      <div class="discount-right flex-c  discount-changes"  v-if="discountRightWidth >= 128 && couponStoreGoods.offline_price !== '0.00'">
        <div class="price">
          <span class="sign">¥</span>
          <span id="goods-price" ref="discountRight">{{ toFixInt(couponStoreGoods.offline_price) }}</span>
        </div>
        <div class="flex-d flex-a-c">
          <div class="reach reach-margin">到店付</div>
          <div class="flex at-discount flex-d">
            <div class="discount-small">
              <span>{{ toFixInt(couponStoreGoods.offline_percent)}}</span
              >折
            </div>
            <span class="small-price">¥{{ toFixInt(couponStoreGoods.offline_cost_price)}}</span>
          </div>
        </div>
      </div>
      <div class="discount-right flex-a-c "  v-if="discountRightWidth < 128  && couponStoreGoods.offline_price !== '0.00'">
        <div class="reach">到店付</div>
        <div class="price ">
          <span class="sign">¥</span>
          <span id="goods-price" ref="discountRight">{{ toFixInt(couponStoreGoods.offline_price) }}</span>
        </div>
        <div class="flex at-discount">
          <div class="discount-small">
            <span>{{ toFixInt(couponStoreGoods.offline_percent) }}</span
            >折
          </div>
          <span class="small-price">¥{{ toFixInt(couponStoreGoods.offline_cost_price) }}</span>
        </div>
      </div>
    </div>

    <div class="booking flex-j-sb flex-a-c" v-if="couponStoreGoods.fight_groups_id">
      <div class="booking-left flex-a-c">
        <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/consumption-coupons/booking.png" />
        <span class="booking-name">拼团</span>
        <span class="bookin-line">|</span>
        <span>{{ couponStoreGoods.fight_people_count }}人拼团到店付仅需 ¥{{ couponStoreGoods.offline_group_price }}</span>
      </div>
      <div class="flex-a-c" @click="goodsGroup">
        去拼团
        <span class="iconfont icon-advertise-next"></span>
      </div>
    </div>

    <div class="consumption">
      <!-- <div class="title">购买消费券，享“到店付”优惠买单</div> -->
      <div class="course_details_name" v-html="taglineText" 
        :style="{color: advertising.font_color, fontSize:`${advertising.font_size}px` }" 
        v-if="advertising.is_open" @click="goAdvertisingLink(advertising.link)">

      </div>
      <div class="title-content ">
          <span class="store-label orange" v-if="couponStoreGoods.is_free">霸王餐</span>
          <span class="store-label yellow" v-if="couponStoreGoods.is_self">自营</span>
          <span class="store-label blue" v-if="couponStoreGoods.is_new">新品</span>
          <span class="consumption-span ">{{ getGoods.title }}</span>
      </div>
      <div class="collect flex-j-sb flex-a-c">
        <div class="left flex-a-c" @click="onFavorite">
          <!--icon-bc_like -->
          <span class="iconfont icon-bc_like" v-if="favorite"></span>
          <span class="iconfont icon-bc_like_normal" v-else></span>
          <div>收藏</div>
        </div>
        <div class="right">
          <span>已售 {{ getGoods.show_sales }} /</span>
          <span class="residue">剩余 {{ getGoods.stock }}</span>
        </div>
      </div>
      <div class="goods-tagList ">
        <block v-for="(item, index) in couponStoreGoods.tag_list" :key="index">
          <div class="tag-item flex-a-c">
            <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/consumption-coupons/succees.png" />
            <div>{{ item }}</div>
          </div>
        </block>
      </div>
    </div>

    <div class="mb20"></div>

    <div class="add-group flex-a-c" v-if="goodsPlugin.group_code && goodsPlugin.group_code.goods_entrance == 1">
      <img :src="goodsPlugin.group_code && goodsPlugin.group_code.code_logo" />
      <div class="group-flex flex">
        <span>{{ goodsPlugin.group_code && goodsPlugin.group_code.code_title }}邀请您添加专属福利群！</span>
        <span class="gray">{{ goodsPlugin.group_code && goodsPlugin.group_code.citation_copy }}</span>
      </div>
      <div class="group-btn" @click="toGroupCode">去加群</div>
    </div>

    <div class="mb20" v-if="goodsPlugin.group_code && goodsPlugin.group_code.goods_entrance == 1"></div>

    <div class="flow-path" v-if="goodsPlugin.coupon_store_goods && goodsPlugin.coupon_store_goods.process_image">
      <div class="title">使用流程</div>
      <div class="flow-content flex-j-sb">
        <div class="flow-content-img">
          <img :src="goodsPlugin.coupon_store_goods && goodsPlugin.coupon_store_goods.process_image" mode="widthFix" />
        </div>
      </div>
    </div>

    <div class="mb20"></div>
    <div class="shop">
      <div class="shop-title flex-j-sb ">
        <div class="title-name">适用门店({{ total }}家店适用)</div>
        <div class="flex-a-c amount" @click="shopNavTo" v-if="locationStatus">更多套餐<span class="iconfont icon-advertise-next"></span></div>
        <div class="flex-a-c amount" @click="locationOn" v-else>定位授权<span class="iconfont icon-advertise-next"></span></div>
      </div>
      <address-us :isImg="imageRight" :address="addressDetail" :storeItem="storeListByGoods[0]">
        <div slot="merchant" class="merchant flex-a-c" @click.stop="callStore">
          <div class="iconfont icon-zx_map_tel"></div>
          <div>联系商家</div>
        </div>
      </address-us>
    </div>

    <div class="mb20"></div>
    <div>
      <purchase-notes
        :goodsNotes="couponStoreGoods.buy_notice"
        :goodsDetail="couponStoreGoods.package_detail"
        :noticeDesc="couponStoreGoods.notice_desc"
        :priceDesc="couponStoreGoods.price_desc"
        :pluginSetting="pluginSetting"
      ></purchase-notes>
    </div>

    <div class="mb20"></div>

    <!-- 商品详情 -->
    <div class="goods-details" id="goods-details">
      <div class="details-title flex-a-c flex-j-c">
        <div class="left-line left-mr"></div>
        <span>商品详情</span>
        <div class="left-line left-ml"></div>
      </div>
      <div class="details-content" id="details-content" v-html="getGoods.content" @click="handleHtml($event)"></div>
    </div>

    <div class="mb160"></div>
    <div class="shop-footer flex-a-c">
      <div class="shop-left flex-a-c">
        <div class="shop-index " @click.stop="tapIndex">
          <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/consumption-coupons/index.png" />
          <div>首页</div>
        </div>
        <div class="shop-service" @click="clickChat">
          <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/consumption-coupons/kefu.png" />
          <div>客服</div>
        </div>
      </div>
      <div class="shop-right flex-a-c">
        <button class="share-btn" @click="sharePopup">分享</button>
        <div class="openGoods-btn flex-a-c flex-j-c" v-if="beginStatus === 0">
          <div>￥{{ getGoods.price }}</div>
          <span>即将开售</span>
        </div>
        <div class="openGoods-btn openGoods-bg flex-a-c flex-j-c" v-if="beginStatus === 1" @click="onPreorder">
          <div>￥{{ getGoods.price }}</div>
          <span>立即购买</span>
        </div>
        <div class="openGoods-btn flex-a-c flex-j-c" v-if="beginStatus === 2">
          <div>￥{{ getGoods.price }}</div>
          <span>活动结束</span>
        </div>
      </div>
    </div>

    <yz-service v-model="serviceShow" :url="cservice" :mobile="serviceMobile" :qr="serviceQRcode"></yz-service>
    <!-- 客服end -->

    <van-popup v-model="shareShow" @close="shareClose" position="bottom">
      <div class="share-main flex-j-sb">
        <div class="share-img flex-a-c">
          <!-- <button style="position:absolute;width:100%;height:100%;opacity:0;top: 0;right: 0;" open-type="share"></button> -->
          <div class="weixin-bg flex-j-c flex-a-c" @click.stop="onMenuShare">
            <div class="iconfont icon-card_weixin"></div>
          </div>
          <span>分享好友</span>
        </div>
        <div class="share-img flex-a-c" @click.stop="copyWriting">
          <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/consumption-coupons/copy-share.png" />
          <span>文案分享</span>
        </div>
        <div class="share-img flex-a-c" @click.stop="PosterPopup">
          <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/consumption-coupons/look-over.png" />
          <span>查看海报</span>
        </div>
      </div>
    </van-popup>

    <van-popup
      v-model="posterShow"
      closeable
      close-on-click-overlay="true"
      @close="PosterClose"
      style="background-color: transparent; background-image: url('');"
      class="posterPopup_style"
      position="center"
    >
    <div class="code_box">
        <img :src="posterImg" mode="widthFix" show-menu-by-longpress="true" />
        <img v-if="!posterImg" src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/img_default.png" mode="widthFix" />
      </div>
    </van-popup>
  </div>
</template>
<script>
import goodsDetails_controller from "./goodsDetails_controller.js";
export default goodsDetails_controller;
</script>
<style scoped>
.goods-details ::v-deep #details-content img {
  max-width: 100% !important;
  height: auto !important;
  display: block;
  border: 0 !important;
}
.goods-details ::v-deep .van-popup__close-icon--top-right {
  top: 26px;
  right: 13px;
}
.goods-img ::v-deep .swiper {
  width:100%;
}
</style>
<style lang="scss" scoped>
.ell {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  /* 定义显示的行数*/
  overflow: hidden;
}
.swiper-img {
  width:100%;
  position: relative;
}
.number-box {
  position: absolute;
  right: 15px;
  bottom: 60px;
  font-size: 12px;
  padding: 4px 15px;
  color: #fff;
  border-radius: 12px;
  background-color: rgba(0, 0, 0, 0.4);
}
.mb20 {
  height: 0.625rem;
  clear: both;
}
.mb160 {
  height: 5rem;
}

.blue {
  background-color: #2aa2ff;
  margin-right: 0.2813rem;
}
.yellow {
  background-color: #ffb536;
  margin-right: 0.2813rem;
}
.orange {
  background-color: #ff3a00;
  margin-right: 0.3438rem;
}
.goods-img {
  width: 100%;
  display: flex;
  position: relative;
  img {
    width: 100%;
    object-fit: contain;
  }
}

.goods-img-tag {
  // width: 5rem;
  padding: 0 20px;
  height: 2.0938rem;
  line-height: 2.875rem;
  text-align: center;
  font-size: 0.625rem;
  color: #ffffff;
  position: absolute;
  left: 0.9375rem;
  bottom: 0.625rem;
  background-image: url("https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/consumption-coupons/goods-img-tag.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 95;
}
.start-time {
  position: absolute;
  right: 0.875rem;
  bottom: 0.625rem;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 0.375rem 0.5938rem 0.4063rem 0.625rem;
  color: #ffffff;
  font-size: 0.8125rem;
  z-index: 95;
  .van-count-down {
    color: #ffffff;
    font-size: 0.8125rem;
  }
}

.discount-price {
  width: 23.4375rem;
  padding:9px 0 18px 0;
  // height: 4.625rem;
  // height: 100%;
  // height: 3.825rem;
  // padding: 12px 0 10px 0;
  background-image: url("https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/consumption-coupons/goods-bottom.png");
  background-repeat: no-repeat;
  // background-size: 100% 100%;
  background-size: 100% 100%;
  // background-size: cover;
  top: 0px;
  /* flex-wrap: wrap; */
  position: relative;

  .flex-c {
    flex-direction: column;
  }
  .discount-left {
    // width: 12.5rem;
    // min-width: 11.25rem;
    font-size: 0.75rem;
    color: #ffffff;
    margin: 0 0 0 0.9375rem;
    flex-wrap: wrap;
    align-items: flex-end;
    .consumer {
      align-items: flex-end;
      // margin-bottom: 0.75rem;
    }
    .discount-use {
      white-space: nowrap;
      align-items: flex-end;
      span {
        // display: flex;
        // align-items: flex-end;
      }
    }
    .number {
      font-size: 1.5rem;
      line-height: 1.25rem;
      // word-break: break-all;
      color: #ffffff;
      margin:0 0.25rem 0 0.125rem;
    }
  }
  .discount-right {
    margin-right: 19px;
    // width: 65%;
    // min-width: 65%;
    // margin-right: 1.1875rem;
    // align-items: flex-end;
    .reach {
      // width: 2.1563rem;
      // height: 0.9688rem;
      // line-height: 0.9688rem;
      padding: 2px 3px;
      text-align: center;
      background-color: #fff;
      font-size: 0.625rem;
      color: #ff3a00;
      border-radius: 0.1875rem;
      align-self: center;
      margin-right: 0.25rem;
      display: flex;
      // margin: 0 0.3125rem 0.75rem 0;
    }
    .reach-margin {
      // margin: 0 0.3125rem 0.4375rem 0;
    }
    .price {
      font-size: 2.1875rem;
      line-height: 2.1875rem;
      color: #ff3a00;
      white-space: nowrap;
    }
    .sign {
      font-size: 0.9375rem;
      color: #ff3a00;
      // display: flex;
      padding-right: 0.25rem;
      // align-items: flex-end;
    }
    #goods-price {
      // font-size: 2.1875rem;
      font-size: 1.5rem;
      line-height: 1.5rem;
      display: inline-block;
    }
    .at-discount {
      flex-direction: column;
      align-items: center;
      margin-left: 0.25rem;
      .discount-small {
        border-radius: 0.4688rem 0.4688rem 0.4688rem 0;
        background-color: #fff;
        color: #ff3a00;
        padding: 0rem 0.4375rem 0rem 0.3125rem;
        font-size: 0.75rem;
        margin-bottom: 0.25rem;
        // margin: 0 0.625rem 0.4375rem 0;
        white-space: nowrap;
        span {
          font-size: 0.6875rem;
        }
      }
      .small-price {
        font-size: 0.6875rem;
        color: #ff8954;
        display: inline-block;
        // margin-bottom: 0.4375rem;
        text-decoration: line-through;
      }
    }
    .flex-d {
      flex-direction: row;
      align-items: center;
    }
  }
  .discount-changes {
    // width: 65%;
    // min-width: 44%;
    margin-right: 0.9375rem;
    text-align: left;
    .price {
      margin-bottom: 3px;
    }
    .discount-small {
      margin: 0 8px 0 0;
    }
  }
}
.discount-bg {
  background-image: url('https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/consumption-coupons/goods-bottom-1.png');
  padding: 18px 0 14px 0;
}
.course_details_name {
  width: 100%;
  text-align: left;
  font-size: 0.875rem;
  // line-height:0.875rem;
  color: #000;
  word-break:break-all;
  // overflow: hidden;
  // text-overflow: ellipsis;
  // display: -webkit-box;
  // -webkit-line-clamp: 2;
  // -webkit-box-orient: vertical;
  margin: 0.875rem auto 1rem;
}
.booking {
  margin: 0.625rem;
  color: #e8bd9b;
  font-size: 0.75rem;
  background-color: #3e3e3e;
  border-radius: 0.3125rem;
  padding: 0.8438rem 0.7813rem 0.8125rem 0.7813rem;
  .booking-left {
    .booking-name {
      margin-right: 0.8438rem;
    }
    .bookin-line {
      margin-right: 0.7188rem;
    }
    img {
      width: 0.7188rem;
      height: 0.8438rem;
      margin-right: 0.3125rem;
    }
  }
}

.consumption {
  margin:0.625rem 0.625rem 0 0.625rem;
  background-color: #ffffff;
  border-radius: 0.3125rem;
  padding: 0.875rem 0.4375rem 1.125rem 0.4375rem;
  .title {
    font-size: 0.9375rem;
    color: #ff3a00;
    margin-bottom: 1.0938rem;
    text-align: left;
  }
  .store-label {
    font-size: 0.625rem;
    color: #ffffff;
    padding: 0.25rem 0.3438rem;
    border-radius: 0.3125rem;
    vertical-align: middle;
  }
  .title-content {
    // padding: 0 0.1563rem;
    width:100%;
    text-align: left;
    display: inline-block;
    height: 100%;
    font-size: 0;
  }
  .consumption-span {
    font-size: 1.25rem;
    line-height: 1.6875rem;
    color: #222222;
    vertical-align: middle;
  }
  .collect {
    padding: 1.5625rem 0.1563rem 0.9375rem 0.1563rem;
    position: relative;
    &::before {
      content: " ";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 2rpx;
      border-top: 2rpx solid #cfcfcf;
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
    }
    .left {
      font-size: 0.75rem;
      color: #ff3a00;
      .iconfont {
        margin-right: 4px;
      }
    }
    .right {
      font-size: 0.75rem;
      color: #979797;
      .residue {
        color: #ff3a00;
        margin-left: 0.1875rem;
      }
    }
    .iconfont {
      color: #b5b5b5;
    }
    .icon-bc_like {
      color: #ff3a00;
    }
  }
  .goods-tagList {
    display: flex;
    flex-wrap: wrap;
    padding: 0.9688rem 0.4688rem 0 0.4688rem;
    .tag-item {
      flex: 0 0 25%;
      justify-content: center;
      margin-right: 1.25rem;
      img {
        width: 0.7813rem;
        height: 0.7813rem;
        margin-right: 0.2813rem;
      }
    }
  }
}
#app {
  #details-content {
    img {
      max-width: 100%;
    }
  }
}
.add-group {
  background-color: #fff;
  margin: 0 0.625rem;
  padding: 0.75rem 0.8125rem;
  border-radius: .3125rem;
  img {
    width: 2.5rem;
    height: 2.5rem;
    margin-right: 0.5625rem;
    border-radius: 50%;
  }
  .group-flex {
    text-align: left;
    flex-direction: column;
    flex: 3;
    font-size: 0.8125rem;
    color: #333333;
    .gray {
      margin-top: 0.3125rem;
      display: inline-block;
      font-size: 0.75rem;
      color: #979797;
    }
  }
  .group-btn {
    width: 2.9375rem;
    height: 1.2188rem;
    line-height: 1.2188rem;
    text-align: center;
    font-size: 0.75rem;
    color: #ffffff;
    background-color: #ff9600;
  }
}

.flow-path {
  margin: 0 0.625rem;
  background-color: #fff;
  padding: 0.8438rem 0.8438rem 0.5938rem 0.8438rem;
  border-radius: 0.3125rem;
  .title {
    font-size: 1rem;
    color: #222222;
    margin-bottom: 0.7188rem;
    text-align: center;
  }
  .flow-content {
    .flow-content-img {
      width: 100%;
      img {
        width: 100%;
      }
    }
  }
}
// .flow-path .flow-item image {
//   width: 1.25rem;
//   height: 1.25rem;
//   margin-right: 0.2813rem;
// }

.flow-path .flow-item .flow-item-text {
  font-size: 0.625rem;
  color: #bababa;
}

/*门店位置信息*/
.shop {
  margin: 0 0.625rem;
  background-color: #fff;
  padding: 0.75rem 0.8125rem 0.8125rem 0.6875rem;
  border-radius: 0.3125rem;
  .shop-title {
    margin: 0 0 0.9375rem 0;
    .title-name {
      font-size: 1.0625rem;
      color: #222222;
    }
    .amount {
      width: 5.0938rem;
      height: 1.7188rem;
      line-height: 1.7188rem;
      text-align: center;
      justify-content: center;
      align-items: center;
      background-image: linear-gradient(-85deg, #ff3d04 0%, #ff6a3f 100%);
      border-radius: 0.3125rem;
      font-size: 0.75rem;
      color: #ffffff;
    }
  }
}

.merchant {
  color: #ff3a00;
  margin-left: 0.9375rem;
  border: 1px solid #ff3a00;
  border-radius: 0.9375rem;
  padding: 0.125rem 0.5625rem 0.2188rem 0.4063rem;
  .icon-zx_map_tel {
    font-size: 0.625rem;
    color: #ff3a00;
    margin-right: 0.3125rem;
  }
}

.goods-details {
  background-color: #fff;
  padding: 1.25rem 0.5625rem 0.625rem 0.5625rem;
  margin: 0 0.625rem;
  border-radius: 0.3125rem;
  .details-title {
    font-size: 1.0416rem;
    color: #222222;
    text-align: center;
    margin-bottom: 0.7813rem;
    .left-line {
      width: 6rem;
      height: 0.0625rem;
      background-color: #dfdfdf;
    }
    .left-mr {
      margin-right: 0.8125rem;
    }
    .left-ml {
      margin-left: 0.8125rem;
    }
  }
}

.shop-footer {
  // width: 100%;
  width:23.4375rem;
  // padding-right: 0.625rem;
  height: 3.75rem;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  .shop-left {
    margin: 0 1.375rem 0 1.0625rem;
    .shop-index {
      font-size: 0.75rem;
      color: #222222;
      margin-right: 1.4063rem;
      .icon-dianpu {
        font-size: 1.0938rem;
        color: #222222;
      }
      img {
        width: 1.3438rem;
        height: 1.3438rem;
      }
    }
    .shop-service {
      font-size: 0.75rem;
      position: relative;
      img {
        width: 1.3438rem;
        height: 1.3438rem;
      }
    }
    .service {
      position: absolute;
      width: 1rem;
      height: 2.8125rem;
      background-color: transparent;
      border: none;
      z-index: 5;
      &::after {
        border: none;
      }
    }
  }
  .shop-right {
    .share-btn {
      width: 7.875rem;
      height: 2.5rem;
      line-height: 2.5rem;
      text-align: center;
      background-image: linear-gradient(90deg, #ff6b04 0%, #ffbe44 100%);
      border-radius: 1.25rem;
      font-size: 0.8125rem;
      color: #ffffff;
      margin-right: 0.375rem;
      border: none;
      &::after {
        border: none;
      }
    }
    .openGoods-btn {
      flex-direction: column;
      width: 7.875rem;
      height: 2.5rem;
      text-align: center;
      background-color: #b9b9b9;
      border-radius: 2.5rem;
      font-size: 0.8125rem;
      color: #ffffff;
    }
    .openGoods-bg {
      background-image: linear-gradient(90deg, #ff3c03 0%, #ff825d 100%);
    }
  }
}

/* 客服 */

/* kefu */
.icon-close11 {
  font-size: 36rpx;
}

.pop-content {
  background-color: #fff;
  border-radius: 1.1875rem;
  text-align: center;
  background: #fff;
  padding: 1.0938rem 0;
  position: relative;
  justify-content: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20.3125rem;
  .pop-top {
    display: flex;
    justify-content: space-between;
    width: 100%;
    .left {
      flex: 1;
      display: flex;
      justify-content: center;
      position: relative;
      margin-bottom: 0.75rem;
      .wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        .img {
          width: 2.625rem;
          height: 2.625rem;
          margin: 0 auto;
          margin-bottom: 0.5rem;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .right {
      flex: 1;
      display: flex;
      justify-content: center;
      margin-bottom: 0.75rem;
      .wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        .img {
          width: 2.625rem;
          height: 2.625rem;
          margin: 0 auto;
          margin-bottom: 0.5rem;
          img {
            width: 100%;
            height: 100%;
          }
        }
        icon {
          width: 2.625rem;
          height: 2.625rem;
          margin: 0 auto;
          margin-bottom: 0.5rem;
          border-radius: 50%;
          overflow: hidden;
          font-size: 1.5625rem;
          background-color: #02c777;
          color: #fff;
        }
        .color2 {
          background: #ff9329;
        }
        .color3 {
          background: #2aa7fb;
        }
      }
    }
  }
  .line {
    width: 2rpx;
    height: 1.5938rem;
    background-color: #999;
  }
}

.poster-main {
  width: 17.5rem;
  height: 23.4375rem;
  background: #fff;
  border-radius: 0.3125rem;
  img {
    width: 17.5rem;
    height: 23.4375rem;
    background: #fff;
    border-radius: 0.3125rem;
  }
  .poster-down {
    width: 3.5625rem;
    height: 3.5625rem;
    position: fixed;
    left: 50%;
    bottom: 3.125rem;
    transform: translateX(-50%);
    z-index: 1000;
    img {
      width: 1.7813rem;
      height: 1.7813rem;
    }
  }
}
.share-main {
  padding: 2.3438rem 2.4375rem;

  .share-img {
    flex-direction: column;
    position: relative;
    .weixin-bg {
      width: 3.5625rem;
      height: 3.5625rem;
      border-radius: 50%;
      background-color: #28c445;
      margin-bottom: 0.4375rem;
      .icon-card_weixin {
        color: #fff;
        font-size: 2.0625rem;
      }
    }
    img {
      width: 3.5625rem;
      height: 3.5625rem;
      margin-bottom: 0.4375rem;
    }
  }
}

.posterPopup_style {
  /* 海报 */
  .code_box {
    width: 18.625rem;
    height: 30.3125rem;
    display: block;
    margin: 0 auto 1.875rem;
    border-radius: 0.375rem;
    img {
      margin-top: 1.25rem;
      width: 100%;
      border-radius: 0.375rem;
    }
  }
  .icon_btn {
    width: 100%;
    position: relative;
    /* height: 3.75rem; */
    background: #fff;
    text-align: center;
    display: flex;
    justify-content: space-around;
    .box {
      width: 50%;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      text-align: center;
      padding: 0.625rem 0;
      position: relative;
    }
    img {
      width: 2.5rem;
      height: 2.5rem;
      margin-bottom: 0.25rem;
    }
  }
  .icon_close {
    width: 100%;
    height: 2.8125rem;
    line-height: 2.8125rem;
    text-align: center;
    background: #efefef;
    color: #333;
    font-size: 1rem;
  }
}
</style>
